<script type="text/javascript" src="/js/mac/flow/base.js"></script>
<script type="text/javascript" src="/js/mac/flow/edit.js"></script>
<script type="text/javascript" src="./flow/gen/mac/xml.js"></script>
<!-- <script type="text/javascript" src="./flow/gen/mac/java.js"></script> -->
<script type="text/javascript">
$(function(){
	var pg = App.soagov.flowEdit.ui, pp = pg.params || {}
		, catalog = pp.catalog || App.getHashParam('catalog')
		, id = pp.id || App.getHashParam('id')
		, code = pp.code || App.getHashParam('code')
		, leftTabs = pg.children('.tabs')
		, nodePl = pg.children('.nodePl')
		, comTree = pg.children('.comTree')
		, cvsBox = pg.children('.cvsBox')
		, cvsPl = $('#flowCvs')
		, cvsEl = document.getElementById('flowCvs')
		, cvsCtx = cvsEl.getContext('2d')
		, flow = Flow.new1({ id: id }, cvsPl)
		, loading = mac.wait('Loading...')
		, propPl = pg.children('.propPl')
		, menuBtns = $('#head>.menuBtns')
		, _flag, _selected, _pos, faces, byMe, coms = {}
		, _clip;
	
	var _hist = {
		arr: [], idx: -1,
		push: function(){
			this.arr.length = this.idx + 1;
			this.arr.push(flow.toJson());
			this.idx = this.arr.length - 1;
			//console.info(this.arr.length + '/' + this.idx);
		},
		ctrlz: function(){
			if (this.idx > 0) {
				var rd = mac.eval(this.arr[--this.idx]);
				if (rd) {
					cvsEl.width = rd.m.w;
					cvsEl.height = rd.m.h;
					// $.extend(rd, fo);
					flow = Flow.from(rd, coms, faces);
				}
// 				flow.o = id;
				refresh();
			}
			// console.info(this.arr.length + '/' + this.idx);
		},
		ctrly: function(){
			if (this.idx < this.arr.length-1) {
				var rd = mac.eval(this.arr[++this.idx]);
				if (rd) {
					cvsEl.width = rd.m.w;
					cvsEl.height = rd.m.h;
					// $.extend(rd, fo);
					flow = Flow.from(rd, coms, faces);
				}
				//flow.o = id;
				refresh();
			}
			// console.info(this.arr.length + '/' + this.idx);
		}
	}
	
	$('#head>.backBtn').unbind().click(function(){
		// menuBtns.children('.rightBtn').unbind().hide();
		window.location = '/soagov';
	}).show();
	menuBtns.children('.leftBtn').unbind().click(function(){
		var a = $(this);
		a.toggleClass('on');
		leftTabs.toggle(a.hasClass('on'));
		$(window).trigger('resize');
		return false;
	});
	menuBtns.children('.rightBtn').unbind().click(function(){
		var a = $(this);
		a.toggleClass('on');
		propPl.toggle(a.hasClass('on'));
		$(window).trigger('resize');
		return false;
	}).show();
	
	var propPg = App.show({
		ctx: 'soagov',
		action: 'nodeProp',
		params:{
			flowId: code,
			catalog: catalog
		}
	}, $.noop, propPl);
	
	// 载入当前flow所依附的对象（服务）
//	$.get(App.soagov.ctx + '/' + type + '/get.do', {
	$.get(App.soagov.ctx + '/flow/get.do', {
		id: id
	}, function(rs) {
		var ro = mac.eval(rs);
		if (!ro.success) {
			loading.close();
			mac.alert(ro.data, ro.params);
			return;
		}
		
		var fo = ro.data;
		faces = ro.faces || {};
		byMe = ro.byMe;
		var hm = $('#head>.main');
		hm.seek('name').text(fo.name);
		hm.seek('code').text('（' + fo.code + '）');
		hm.seek('path').text('导出路径：' + fo.path);
		
		//载入当前flow所依赖的组件
		$.get(App.soagov.ctx + '/com/list.do', {
			id: id,
			pageNo: 1,
			pageSize: 9999
		}, function(rs) {
			var ro = mac.eval(rs);
			if (!ro.success) {
				loading.close();
				mac.alert(ro.data, ro.params);
				return
			}
			$.each(ro.data.list, function(i, c){
				if (c.json) {
					var a = mac.eval(c.json);
					a.o = c.id;
					coms[c.id] = a;
				}
			});
			//载入flow的图表
			$.get(App.soagov.ctx + '/flow/load.do', {
				id: id
			}, function(rs) {
				loading.close();
				var ro = mac.eval(rs);
				if (!ro.success) {
					mac.alert(ro.data, ro.params);
					return
				}

				var rd = mac.eval(ro.data);
				if (rd) {
					cvsEl.width = rd.m.w;
					cvsEl.height = rd.m.h;
					$.extend(rd, fo);
					flow = Flow.from(rd, coms, faces);
				}
				flow.o = id;
				propPg.init(flow, faces, cvsEl, cvsCtx, _hist);
				refresh();
				_hist.push(); //
			});
		});
	});
	
	comTree.mac('dtree', {
		treeConfig : {
			children: [{
				key: Cache.base.dir.root,
				title: '我的项目',
				isLazy: true,
				isFolder: true,
				icon: 'root.png'
			}],
			imagePath: App.soagov.ctx + '/css/img/',
			dnd: {
				onDragStart: function(n) {
					var t = n.data.type;
					return t == C.COM || t == C.SVC;
				},
				onDragStop: function(n, e) {
					// 前面已限制只有 C.COM C.SVC可以被拖动
					var t = n.data.type, p = getCvsPos(e);
					$.get(App.soagov.ctx + "/" + Cache.base.dir.types[t] + '/get.do', {
						id: n.data.key
					}, function(rs){
						var ro = mac.eval(rs), o = ro.data;
						if (ro.success && o) {
							if (t == C.COM) {
								var a = mac.eval(o.json);
								a.o = o.id;
								z = Flow.Nodes[o.type].new2(a, p);
							} else if (t == C.SVC) {
								z = Flow.Nodes['subflow'].new2({
									'o': o.id,
									"t" : "subflow",
									"d" : {
										"code" : o.code,
										'ref' : o.ref || o.code,
										"name" : o.name,
										"faceId" : o.faceId,
										"memo" : o.memo,
										"impl" : o.impl,
										"ver" : o.ver
									},
									"m" : {
										"w" : 180,
										"h" : 40,
										"caption" : ''
									}
								}, p);
							}
							$.each(ro.faces, function(i, f){
								if (f.id) {
									faces[f.id] = f;
								}
							});
							z.setCaption(o.name, cvsCtx.measureText(o.name).width);
							flow.addNode(z);
							refresh();
						}else{
							mac.alert(ro.data, ro.params);
						}
					});
				}
			}
		},
		loader : {
			url : App.soagov.ctx + '/dir/list.do',
			autoLoad : true
		},
		onActivate : function(dt) {
			var t = dt.data.type;
			if ($.inArray(t, [ 2, 3, 4 ]) < 0) {
				
			}
		},
		beforeLoad: function(dt, dd){
			$.each(dd, function(i, d){
				d.icon = Cache.base.dir.icons[d.type];
			});
		}
	}).getNode(Cache.base.dir.root).expand();
	
	function toCvsPos(x, y){
		var p = cvsBox.position();
		return {
			x: x - p.left - 12 + cvsBox.scrollLeft(),
			y: y - p.top - 12 + cvsBox.scrollTop()
		}
	}
	function getCvsPos(e){
		return toCvsPos(e.clientX, e.clientY);
	}
	function refresh(){
		flow.draw(cvsCtx);
	}
	
	function pullArrow(n0, p){
		if (!n0.n){
// 			for (var k in n0) {
// 			}
			alert('此节点不能有后继');
			return;
		}
		if (n0.n.id){
			alert('此节点只能有一个后继');
			return;
		}
		var t0 = n0.t;
		if (t0 == 'judge' && n0.count(1) > 1) {
			alert('判定节点只能有两个后继');
			return;
		}
		var aw = Flow.ArrowNode.new1(n0.byAnchor(p), p);
		cvsPl.bind('mousemove', function(e){
			//_a.erase(cvsCtx);
			var p = getCvsPos(e);
			aw.m.x1 = p.x;
			aw.m.y1 = p.y;
			refresh();
			aw.draw(cvsCtx);
			return 0;
		}).one('mouseup', function(e){
			cvsPl.unbind('mousemove');
			var p = getCvsPos(e), ns = flow.nodes;
			for (var i=1; i < ns.length; i++) {
				var n = ns[i];
				if (n && n.id != n0.id && n.onMe && n.onMe(p)) {
					if (!n.p) {
						alert('此节点不能有前驱');
						refresh();
						return 0;
					}
					if (t0 == 'judge') {
						aw.d.tagCode = n0.hasNext('yes')? 'no':'yes';
					} else if (t0 == 'switch') {
// 						while(true) {
							var t = prompt('请输入分支条件的有效值');
// 							if (t) {
								aw.d.tagCode = t;
// 								break;
// 							}
// 						}
					}
					aw.n = n; // 让两个节点建立关系
					aw.p = n0;
					var k = flow.addNode(aw);//先添加才有ID
					if (n.p == -1) {
						n.p = aw;
					} else {
						n.p[k] = aw;
					}
					if (n0.n == -1) {
						n0.n = aw;
					} else {
						n0.n[k] = aw;
					}
					aw.adjust();//变折线
					refresh();
					_hist.push();
					return 1;
				}
			}
			delete a;
			cvsCtx.clearRect(0, 0, cvsEl.width, cvsEl.height);
			flow.draw(cvsCtx);
			return 0;
		});
	}
	function startDrag(n, p0){
		function mvArrows(a, t, o){
			if (a && a != -1) {
				var z = {};
				if (a.id) {
					z[a.id] = a;
				} else {
					z = a;
				}
				for (var k in z) {
					if (!z[k]) {
						return;
					}
					var m = z[k].m, c = o.getAnchor(m['a' + t]);
					if (c) {
						m['x' + t] = c.x;
						m['y' + t] = c.y;
					}
					z[k].adjust(); //变折线
				}
			}
		}
		var old = { x: n.x, y: n.y };
		_pos = p0;
		cvsPl.bind('mousemove', function(e){
			var p = getCvsPos(e)
				, dx = p.x - _pos.x, dy = p.y - _pos.y;
			_pos = p;
			if (n.t == 'arrow') {
				//TODO 手动调整箭头
			} else {
				//移动选中的节点并连动与之相连的箭头
				var ns = flow.nodes;
				for (var i=0; i<ns.length;i++) {
					var a = ns[i];
					if (a && a.s && a.t != 'arrow') {
						a.x += dx;
						a.y += dy;
						mvArrows(a.p, 1, a);
						mvArrows(a.n, 0, a);
					}
				}
			}
			refresh();
		}).one('mouseup', function(e){
			cvsPl.unbind('mousemove');
			if (_flag == 'move' && (n.x != old.x || n.y != old.y)) {
				_hist.push();
			}
			return 1;
		});
	}
	function unselect1(){
		_selected = null;
		var ns = flow.nodes;
		for (var i=1; i < ns.length; i++) {
			var a = ns[i];
			if (a) {
				a.s = 0;
			}
		}
	}
	
	cvsPl.mousedown(function(e){
		var ns = flow.nodes, p0 = getCvsPos(e);
		if (_flag != 'move') {
			unselect1(flow);
		}
		for (var i=1; i < ns.length; i++) {
			var n = ns[i] || {};
			if (n.onMe && n.onMe(p0)) {
				switch (_flag) {
				case 'arrow':
					pullArrow(n, p0);
					break;
				case 'move':
					startDrag(n, p0);
					break;
				default:
					n.s = 1;
					_selected = n;
					refresh();
					propPg.setProps(n);
					_flag = 'move';
					if (n.t != 'arrow') {
						startDrag(n, p0);
					}
				}
				return 1;
			}
		}
		if (!_selected) {
			_selected = flow;
			propPg.setProps(flow);
		}
		if (_flag && _flag != 'move') {
			return;
		}
		_flag = 'select';
		refresh();
		cvsPl.bind('mousemove', function(e){
			refresh();
			var p1 = getCvsPos(e);
			cvsCtx.strokeStyle = '#0000CC';
			cvsCtx.strokeRect(p0.x, p0.y, p1.x - p0.x, p1.y - p0.y);
			return 0;
		}).one('mouseup', function(e){
			cvsPl.unbind('mousemove');
			var p1 = getCvsPos(e), ns = flow.nodes, j = 0;
			for (var i=1; i < ns.length; i++) {
				var n = ns[i];
				if (n && n.t != 'arrow') {
					var m = n.m;
					if (((n.x >= p0.x && n.x <= p1.x) || (n.x <= p0.x && n.x >= p1.x))
						&& ((n.y >= p0.y && n.y <= p1.y) || (n.y <= p0.y && n.y >= p1.y))) {
						n.s = 1;
						j++;
					}
				}
			}
			_flag = (j>1? 'move':null);
			refresh();
			return 1;
		});
		return 1;
	});

	function save(d){
		$.post(App.soagov.ctx + '/flow/save.do', {
			id: flow.o,
			code: d.code,
			name: d.name,
			faceId: d.faceId,
			impl: d.impl,
			ver: d.ver,
			catalog: d.catalog || catalog,
			type: d.type,
			url: d.url,
			memo: d.memo,
			nexus: flow.getNexus(catalog),//byMe
			faces: flow.getFaces(),
			json: flow.toJson(null, "\t"),
			thumb: cvsEl.toDataURL("image/png")
		}, function(dd){
			var ro = mac.eval(dd);
			if (ro.success) {
				mac.alert('保存成功');
			} else {
				mac.alert(ro.data, ro.params);
			}
		});
	}
	//
	menuBtns.children('.saveBtn').unbind().click(function(){
		save(flow.d);
	}).show();
	//
	$(window).keydown(function(e){
		var s = _selected;
		if (e.target != document.body) {
			return 0;
		}
		// delete
		if (e.keyCode == 46 && s) {
			e.stopPropagation();
			flow.delNode(s);
			refresh();
			return 1;
		}
		// ctrl + a
		if (e.keyCode == 65 && e.ctrlKey) {
			//e.stopPropagation();
			e.preventDefault();
			_flag = 'move';
			var ns = flow.nodes;
			for (var i=1; i<ns.length; i++) {
				var z = ns[i];
				if (z && z.id && z.t != 'arrow') {
					z.s = 1;
				}
			}
			refresh();
			return 1;
		}
		// ctrl + z
		if (e.keyCode == 90 && e.ctrlKey) {
			//e.stopPropagation();
			e.preventDefault();
			_hist.ctrlz();
			return 1;
		}
		// ctrl + y
		if (e.keyCode == 89 && e.ctrlKey) {
			//e.stopPropagation();
			e.preventDefault();
			_hist.ctrly();
			return 1;
		}
		// ctrl + c
		if (e.keyCode == 67 && e.ctrlKey) {
			var ns = flow.nodes;
			//e.stopPropagation();
 			e.preventDefault();
			_clip = [];
			// 复制选中的节点
			for (var i=1; i<ns.length; i++){
				var a = ns[i];
				if (a && a.s && a.t != 'arrow'){
					//复制单个节点
					_clip.push(a);
					if (a.p && a.p != -1) {
						//复制此节点前面的箭头
						for (var j=1; j<ns.length; j++) {
							var x = a.p[j];
							// a.p 与 ns 长度一致，x.p.s 是否被选中
							if (x && x.p && x.p.s) {
								_clip.push(x);
							}
						}
					}
				}
			}
			return 1;
		}
		// ctrl + v
		if (e.keyCode == 86 && e.ctrlKey && _clip.length) {
			//e.stopPropagation();
			e.preventDefault();
			//循环复制节点
			var ns = flow.nodes, map = {}, hs = 0,
				mw = flow.m.w, mh = flow.m.h;
			for (var i=1; i<ns.length; i++){
				if (ns[i] && ns[i].t == 'start') {
					hs = 1; // 是否有start
					continue;
				}
			}
			for (var i=0; i<_clip.length; i++){
				var a = _clip[i];
				a.s = 0;
				if (a && a.t != 'arrow' && (!hs || a.t != 'start')) {
					var z = Flow.Nodes[a.t].copy(a, 60);//
					z.s = 1;
					flow.addNode(z);
					map[a.id] = z; // 建立与源节点的关系
					mw = Math.max(z.x + z.m.w, mw);
					mh = Math.max(z.y + z.m.h, mh);
				}
			}
			// 复制必要的箭头
			for (var i=0; i<_clip.length; i++){
				var a = _clip[i];
				if (a && a.t == 'arrow') {
					// 根据与源节点的关系，建立与节点的关系
					var p = map[a.p.id], n = map[a.n.id];
					if (p && n) {
						var z = Flow.ArrowNode.new1(
							{ x: p.x, y: p.y, i: p.id },
							{ x: n.x, y: n.y, i: n.id });
						z.d = Flow.extend({}, a.d);
						z.p = p;
						z.n = n;
						flow.addNode(z);
						if (n.p == -1) {
							n.p = z;
						} else {
							n.p[z.id] = z;
						}
						if (p.n == -1) {
							p.n = z;
						} else {
							p.n[z.id] = z;
						}
						z.adjust();
					}
				}
			}
			cvsEl.width = mw;
			cvsEl.height = mh;
			flow.m.w = mw;
			flow.m.h = mh;
			propPg.showVal(propPg.frm.width, mw);
			propPg.showVal(propPg.frm.height, mh);
			_flag = 'move';
			refresh();
			_hist.push();
			return 1;
 		}
	});

	nodePl.children('.item').click(function(){
		var me = $(this);
		me.siblings().removeClass('selected');
		me.addClass('selected');
		_flag = me.attr('name');
		cvsPl.one('click', function(e){
			var p = getCvsPos(e);
			nodePl.children('.item').removeClass('selected');
			if (_flag != 'arrow') {
				var n = Flow.Nodes[_flag].new1(p);
				flow.addNode(n);
				refresh();
			}
			_flag = null;
		});
		return 0;
	});

	leftTabs.mac('tabs', {
		tabWidth: 80,
		tabHeight: 32,
		items: [{
			code: 'nodePl',
			title: '节点元素',
			el: nodePl
		},{
			code: 'comTree',
			title: '组件库',
			el: comTree
		}]
	}).selectFirst();
	
	function adjust(){
		var h = pg.parent().height();
		pg.height(h);
		h -= 3;
		leftTabs.height(h);
		leftTabs.adjust();
		cvsBox.height(h).width(
			pg.width()
			- (leftTabs.is(':visible')? leftTabs.width():0)
			- (propPl.is(':visible')? propPl.width():0)
		);
		propPl.height(h);
	}
	$(window).resize(adjust);
	adjust();
	
	var mainMenu = $('#mainMenu').mac('menu', {
		children: [{
			title: '另存为',
			action : 'saveAs',
			icon: 'icon-disk'
		},{
			title: '导出成图片',
			action : 'expPic',
			icon: 'icon-disk'
		},{
			title : '生成预览',
			icon: 'icon-pencil',
			children: [{
				title : 'XML配置',
				action : 'pvwXml',
				icon: 'icon-pencil',
			},{
				title : 'JAVA代码',
				action : 'pvwJava',
				icon: 'icon-pencil'
			}]
		},{
			title : '生成下载',
			icon: 'icon-pencil',
			children: [{
				title : '流程配置',
				action : 'expXml',
				icon: 'icon-pencil'
			},{
				title : 'JAVA代码',
				action : 'expJava',
				icon: 'icon-pencil'
			}]
		},{
			title : '生成发布',
			icon: 'icon-pencil',
			children: [{
				title : '流程配置',
				action : 'postXml',
				icon: 'icon-pencil'
			},{
				title : 'JAVA代码',
				action : 'postJava',
				icon: 'icon-pencil'
			}]
		}]
	}).appendTo($('body'));
	
	menuBtns.children('.menuBtn').contextMenu({
		menu: mainMenu,
		button: 1,
		anchor: 'el',
		offset: { x: 4, y: 60 }
	}, function(act, el, pos) {
		switch (act) {
		case 'saveAs':
			var f = flow.d.o, p = $.extend({}, f);
			delete p.id;
			delete p.key;
			App.open({
				action: 'dirPicker',
				title: '选择流程另存位置',
				ctx: 'base',
				allow: [ C.APP, C.DIR ],
				params: { allow: [0,1,2] },
				modal: true
			}, function(d){
				if (d.type == 0 || d.type == 1) {
					p.parent = d.key;
				} else if (d.type == 2){
					p = $.extend({}, d, p);
				}
				App.open({
					ctx: 'soagov',
					action: 'flowEdit',
					title: '流程另存为',
					modal: true,
					params: p
				}, save);
			});
			break;
		case 'expPic':
			var p = cvsEl.toDataURL("image/png");
//			p = p.replace("image/png", "image/octet-stream");
//			window.location.href = p;
			var w = window.open('about:blank', flow.d.name);
			w.document.write('<img src="' + p +'" alt="' + flow.d.name + '" />');  
			//window.open(p);
			break;
		case 'pvwXml':
			var x = Flow.genXml(flow, faces);
			if (x) {
				App.open({
					closeOnEsc: 1,
					ctx: 'soagov',
					action: 'flowGenPreview',
					params: x
				});
			}
			break;
		case 'pvwJava':
			App.open({
				action: 'flowGenPreview',
				params: Flow.genJava(flow, faces)
			});
			break;
		case 'expXml':
			var a = $('<a>点击下载</a>').attr({
				download: '1.xml',
				href: 'data:text/xml,' + encodeURI(Flow.genXml(flow, faces))
			});
			$('<div></div>').mac('dialog',{
				title: '文件下载',
				model: true,
				autoOpen: true,
				width: 200,
				height: 80,
				draggable: true,
				el: $('<p style="text-align: center;"></p>').append(a)
			});
			break;
		case 'expJava':
			Flow.genCode(flow, faces);
			break;
		case 'postXml':
			$.post(App.soagov.ctx + '/flow/publish.do', {
				id: id,
				catalog: catalog,
				data: Flow.genXml(flow, faces)
			}, function(dd){
				var ro = mac.eval(dd);
				if (ro.success) {
					mac.alert('发布成功');
// 					App.open({
// 						ctx: 'soagov',
// 						action: 'flowPubResult',
// 						params:
// 							$.map(ro.data, function(v, k){
// 								return k + "\t" + mac.eval(v);
// 							}).join('\n')
// 					});
				} else {
					mac.alert('发布失败');
				}
			});
			break;
		case 'postJava':
			//TODO 发布成JAVA
			break;
		}
		
		return false;
	}).show();
});
</script>
<div class="tabs"></div>
<div class="comTree"></div>
<div class="nodePl">
	<div class="item" name="process">
		<div class="nodes process"></div>
		<span>处理节点</span>
	</div>
	<div class="item" name="subflow">
		<div class="nodes subflow"></div>
		<span>子流程节点</span>
	</div>
	<div class="clear"></div>
	<div class="item" name="judge">
		<div class="nodes judge"></div>
		<span>判定节点</span>
	</div>
	<div class="item" name="input">
		<div class="nodes input"></div>
		<span>输入节点</span>
	</div>
	<div class="clear"></div>
	<div class="item" name="output">
		<div class="nodes output"></div>
		<span>输出节点</span>
	</div>
	<div class="item" name="switch">
		<div class="nodes switch"></div>
		<span>多路分支</span>
	</div>
	<div class="clear"></div>
	<div class="item" name="arrow">
		<div class="nodes arrow"></div>
		<span>箭头</span>
	</div>
	<div class="item" name="start">
		<div class="nodes start"></div>
		<span>开始</span>
	</div>
	<div class="clear"></div>
	<div class="item" name="end">
		<div class="nodes end"></div>
		<span>结束</span>
	</div>
	<div class="item" name="try">
		<div class="nodes try"></div>
		<span>try</span>
	</div>
	<div class="clear"></div>
	<div class="item" name="catch">
		<div class="nodes catch"></div>
		<span>catch</span>
	</div>
	<div class="item" name="finally">
		<div class="nodes finally"></div>
		<span>finally</span>
	</div>
	<div class="clear"></div>
	<div class="item" name="yrt">
		<div class="nodes yrt"></div>
		<span>yrt</span>
	</div>
	<div class="item" name="beginTx">
		<div class="nodes beginTx"></div>
		<span>开启事务</span>
	</div>
	<div class="clear"></div>
	<div class="item" name="commitTx">
		<div class="nodes commitTx"></div>
		<span>提交事务</span>
	</div>
	<div class="item" name="rollbackTx">
		<div class="nodes rollbackTx"></div>
		<span>回滚事务</span>
	</div>
	<div class="clear"></div>
	<div class="item" name="fork">
		<div class="nodes fork"></div>
		<span>fork</span>
	</div>
	<div class="item" name="join">
		<div class="nodes join"></div>
		<span>join</span>
	</div>
	<div class="clear"></div>
	<div class="item" name="suspend">
		<div class="nodes suspend"></div>
		<span>suspend</span>
	</div>
	<div class="clear"></div>
</div>
<div class="cvsBox">
	<canvas id="flowCvs" width="800" height="1132"
		style="background-color: #FFFFFF;"></canvas>
</div>
<div class="propPl form"></div>
<div id="mainMenu"></div>